import React, {
  Component,
  StyleSheet,
  Text,
  TextInput,
  View,
  ScrollView,
  TouchableOpacity,
  Image,
  Navigator,
  Alert,
  ActivityIndicatorIOS,
} from 'react-native';

var loginCheckQuery = require('./Query').query;

class Login extends Component {
  constructor(props){
    super(props);
    this.state = {phone:'',
        password:'',
        user:null,
        isLoading:false};
  }
  _onPressRegister(){
    this.props.navigator.push({name:'Register'});
  }

  _onPressLogin(){
    this.refs.phone.blur();
    this.refs.password.blur();

    if(this.state.phone === '')
    {
      Alert.alert('提示', '请填写手机号码');
    }
    else if(this.state.password === '')
    {
      Alert.alert('提示', '请输入密码');
    }
    else{
      this.setState({isLoading:true});
      loginCheckQuery.loginCheckQuery(this.state.phone,this.state.password,this,function(owner,response){
        console.log(response);
        if(owner)
        {
          owner.setState({isLoading:false});
          if(response.success !== true ){
            Alert.alert("错误",response.error);
          }
          else{
            storage.save({
              key: 'user',
              rawData: response.message,
              expires: null
            });
            global.g_user = response.message;
            owner.setState({user:response.message});
            owner.props.navigator.push({name:'ParentMain',params:{user:owner.state.user}});
          }
        }
      })
    }
  }

  render() {
    var spinner = this.state.isLoading ?
        ( <ActivityIndicatorIOS
            style={{marginTop:10}}
            hidden='true'
            size='small'/> ) :
        ( <View/>);
    var usrIcon = require('../../icon/avatar.png');
    var passIcon = require('../../icon/padlock.png');
    var eyeIcon = require('../../icon/eye.png');

    return(
      <View style={styles.container}>
        <Image
          style={styles.baobaoLogo}
          source={require('../../icon/logo.png')}
        />

        <View style={styles.loginContainer}>
          
          <View style={[styles.flowRight,styles.bottomLine]}>
            <Image style={styles.loginIcon} source={usrIcon}/>
            <TextInput ref='phone' style={styles.loginInput} placeholder='请输入注册时手机号' 
               keyboardType = 'numeric'
              onChangeText={(value)=>{this.setState({phone:value})}}/>
          </View>

          <View style={[styles.flowRight,styles.bottomLine]}>
            <Image style={styles.loginIcon} source={passIcon}/>
            <TextInput ref='password' style={styles.loginInput} placeholder='请输入密码' 
              secureTextEntry = {true}
              onChangeText={(value)=>{this.setState({password:value})}}/>
            <Image source={eyeIcon}/>
          </View>

          {spinner}

          <View style={[styles.flowRight,{marginTop:30}]}>    
            <TouchableOpacity style={styles.loginButton} onPress={this._onPressLogin.bind(this)}>
              <Text style={styles.loginButtonText}>登  录</Text>
            </TouchableOpacity>
          </View>

          <View style={[styles.flowRight,{marginTop:5}]}>
            <View style={styles.registerContainer}>
              <TouchableOpacity style={styles.registerButton} onPress={this._onPressRegister.bind(this)}>
                <Text style={styles.registerButtonText}>注册账号</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.registerButton}>
                <Text style={styles.registerButtonText}>忘记密码</Text>
              </TouchableOpacity>
            </View>
          </View>
          
          <View style={styles.flowRight}>
            <View style={styles.separator}/>
            <Text style={styles.otherloginText}>第三方登录</Text>
            <View style={styles.separator}/>
          </View>

          <View style={styles.flowRight}>
            <View style={styles.socialAccContainer}>
              <Image source={require('../../icon/weibo.png')}/>
              <Image source={require('../../icon/weixin.png')}/>
              <Image source={require('../../icon/qq.png')}/>
            </View>
          </View>

        </View>

        <View style={styles.footer}>
          <Text style = {styles.footerText}>抱抱V1.00  版权所有</Text>
          <Text style = {styles.footerText}>
            copyright@2016深圳前海抱抱网络科技股份有限公司
          </Text>
        </View>
    </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor:'#fff',
    flex:1,
  },
  baobaoLogo:{
    alignSelf:'center',
    marginTop:50,
    width:120,
    height:120
  },
  loginContainer:{
    flexDirection:'column',

    //alignItems:'center',
  },
  flowRight:{ //账号、密码、登录
    //width:200,
    alignSelf:'stretch',
    flexDirection: 'row', //水平排布
    alignItems: 'center', //中心线对齐
    marginTop:25,
    marginLeft:44,
    marginRight:44,
  },
  loginIcon:{
    width:20,
    height:20,
    marginLeft:10,
    marginRight:10,
  },
  bottomLine:{
    borderBottomWidth:1,
    borderBottomColor:'#eeeeee',
  },
  
  loginText:{
    //width:30,
    flex:1,
    fontSize:16,
    color:'#656565',
  },
  loginInput:{
    height:30,
    //width:170,
    flex:5,
    fontSize:14,
    color:'#bbbbbb',
  },
  loginButton:{
    //width:200,
    flex:1,
    height:32,
    borderRadius:6,
    borderStyle:'solid',
    borderWidth:1,
    borderColor:'#06a9fe',
    justifyContent:'center', //内容垂直方向居中
    marginLeft:20,
    marginRight:20,
  },
  loginButtonText:{
    fontSize:16,
    textAlign:'center', //内容水平方向居中
    color:'#06a9fe'
  },
  separator:{
    height:1,
    backgroundColor:'#dddddd',
    flex:4,
  },
  otherloginText:{
    flex:3,
    fontSize:12,
    color:'#bbbbbb',
    textAlign:'center',
  },
  socialAccContainer:{
    flex:1,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-around', //没有起作用
    marginBottom:20,
  },
  registerButton:{
  },
  registerButtonText:{
    color:'#bbbbbb',
    fontSize:12,
  },
  forgetButton:{
  },
  forgetButtonText:{
    color:'#bbbbbb',
    fontSize:12,

  },
  registerContainer:{
    flex:1,
    height:16,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between', //内容垂直方向居中
    marginLeft:20,
    marginRight:20,
  },
  socialIcon:{
    marginHorizontal:15, //因为justifyContent没有起作用，所以使用这个属性
  },
  footer:{
    flex:1,
    alignItems:'center',
    justifyContent:'center',
  },
  footerText:{
    fontSize:12,
    color:'#656565',
    marginBottom:10,
  }
});

module.exports = Login;
